<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <svg
      :preserveAspectRatio="keepProportions ? 'xMidYMid meet' : 'none'"
      viewBox="0 0  96 96"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="48"
        cy="48"
        r="47"
        :fill="nodeData.currentStyle.fill"
        :stroke="nodeData.currentStyle.stroke"
        :stroke-width="nodeData.currentStyle.strokeWidth"
      ></circle>
      <!-- <text style="text-anchor: middle; dominant-baseline: middle" x="50" y="50" class="text">
        {{ nodeData.text }}
      </text> -->
    </svg>
  </div>
</template>
<script>
import mixin from './mixin'
export default {
  name: 'TestCom',
  mixins: [mixin],
  data() {
    return {
      keepProportions: true,
      nodeData: {
        shape: 'TestCom', //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        text: '测试',
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: '#fff',
          stroke: '#000',
          strokeWidth: 2
        },
        isDropEnd: false,
        width: 100,
        height: 100,
        // 其他样式
        style: {}
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  svg {
    width: 100%;
    height: 100%;
    .text {
      // text-align: center;
      fill: rgba(0, 0, 0, 0.65);
      user-select: none;
      font-size: 20px;
    }
  }
}
</style>
